/* 滚动条样式 */
@mixin scrollBarStyle() {
  &::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  // 正常情况下滑块的样式
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
    background: #282b3e1a;
  }

  // 正常时候的主干部分
  &::-webkit-scrollbar-track {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    background: transparent;
  }

  // 鼠标悬浮在该类指向的控件上时滑块的样式
  &:hover::-webkit-scrollbar-thumb {
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
    background: transparent;
    border-radius: 10px;
  }

  // 鼠标悬浮在滑块上时滑块的样式
  &:hover::-webkit-scrollbar-thumb {
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
    background: #282b3e4d;
  }

  // 鼠标悬浮在滚动条上的主干部分
  &:hover::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
    background: transparent;
  }
}

/*隐藏滚动条同时又可以滚动*/
@mixin scrollBarnone() {
  &::-webkit-scrollbar {
    display: none;
  }

  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}

/* 弹性盒子 */
@mixin flexBox(
  $alignItems: center,
  $justifyContent: center,
  $flexDirection: row,
  $flexWrap: wrap
) {
  display: flex;
  align-items: $alignItems;
  justify-content: $justifyContent;
  flex-direction: $flexDirection;
  flex-wrap: $flexWrap;
}

/* 字体样式 */
@mixin fontFamily() {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YAHei', '微软雅黑', Arial, sans-serif;
}

/* 字体颜色 大小 */
@mixin fontStyle($color: #606266, $size: 16px) {
  color: $color;
  font-size: $size;
}

/* 边框样式 */
@mixin borderStyle(
  $directions: null,
  $width: 1px,
  $type: solid,
  $color: #dcdfe6
) {
  @if $directions !=null {
    @each $direction in $directions {
      border-#{$direction}: $width $type $color;
    }
  } @else {
    border: $width $type $color;
  }
}

/* 圆形盒子 */
@mixin circle($size: 10px, $bg: #fff) {
  border-radius: 50%;
  width: $size;
  height: $size;
  line-height: $size;
  text-align: center;
  background: $bg;
}

/* 相对定位 */
@mixin position($position: relative) {
  position: $position;
}

@mixin ellipsis() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
    三角形
        1.左：$right
        2.右：$left
        3.上：$bottom
        4.下：$top
        5.左上：$left、$top
        6.左下：$left、$bottom
        7.右上：$right、$top
        8.右下：$right、$bottom
*/
@mixin triangle(
  $size: 50px,
  $right: transparent,
  $left: transparent,
  $top: transparent,
  $bottom: transparent
) {
  border: $size solid transparent;
  width: 0;
  height: 0;
  border-right-color: $right;
  border-left-color: $left;
  border-top-color: $top;
  border-bottom-color: $bottom;
}

/*
    气泡对话框
*/
@mixin bubble-dialog(
  $borderRadius: 5px,
  $width: 200px,
  $height: 50px,
  $backgroundColor: #f90,
  $color: #fff,
  $fontSize: 1em
) {
  position: relative;
  border-radius: $borderRadius;
  width: $width;
  height: $height;
  background-color: $backgroundColor;
  line-height: $height;
  text-align: center;
  font-size: $fontSize;
  color: $color;

  &::after {
    position: absolute;
    left: 100%;
    top: 50%;
    margin-top: -5px;
    border: 5px solid transparent;
    border-left-color: $backgroundColor;
    content: '';
  }
}

/*
    心形
*/
@mixin hert(
  $width: 200px,
  $height: 200px,
  $backgroundColor: #f90,
  $linerColor: #3c9 #09f #f66,
  $linear: 'no'
) {
  position: relative;
  width: $width;
  height: $height;

  @if $linear == 'yes' {
    background-image: linear-gradient(to bottom, #09f, #f66);
    box-shadow: 0 0 20px rgba(#000, 0.8);
  } @else {
    background-color: $backgroundColor;
  }

  transform: rotate(45deg);

  &::before,
  &::after {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 100%;
    width: 100%;
    height: 100%;

    @if $linear == 'no' {
      background-color: $backgroundColor;
    }

    content: '';
  }

  &::before {
    @if $linear == 'yes' {
      background-image: linear-gradient(to bottom, #09f, #f66);
    }

    transform: translateX(-50%);
  }

  &::after {
    @if $linear== 'yes' {
      background-image: linear-gradient(
        to bottom,
        #3c9,
        #09f 50%,
        transparent 50%,
        transparent
      );
    }

    transform: translateY(-50%);
  }
}

/*
    在原先元素的基础上复制一个元素，并将其覆盖在它身上
*/
@mixin cover($top: 0, $left: 0, $width: 100%, $height: 100%) {
  position: absolute;
  top: $top;
  left: $left;
  width: $width;
  height: $height;
}

/*
    在原先元素基础上复制出一个元素，只不过这个元素位置和原先的元素相同，
*/
@mixin inset($inset: 0) {
  position: absolute;
  top: $inset;
  left: $inset;
  right: $inset;
  bottom: $inset;
}

/*
    文字模糊处理
*/
@mixin blurTest {
  color: transparent;
  text-shadow: #111 0 0 5px;
}

/*
    模糊处理，数值越大越模糊
*/
@mixin blur($blur: 10px) {
  filter: blur($blur);
}

/*
    placeholder字体样式
*/
@mixin placeholder($color: #ddd) {
  &::-webkit-input-placeholder,
    /* Chrome/Opera/Safari */
    &::-moz-placeholder,
    /* Firefox 19+ */
    &:-ms-input-placeholder,
    /* IE 10+ */
    &:-moz-placeholder {
    /* Firefox 18- */
    color: $color;
  }
}

/*
   文字竖向排版
        vertical-lr、tb-lr;从左向右
        vertical-rl、tb-rl;从右向左
*/
@mixin columns-test(
  $height: 210px,
  $lineHeight: 30px,
  $writingMode: vertical-lr,
  $writingModeIe: tb-lr
) {
  height: $height;
  line-height: $lineHeight;
  text-align: justify;
  writing-mode: $writingMode;
  writing-mode: $writingModeIe;
}

/*
    文字渐变效果实现
*/
@mixin text-liner(
  $linear: linear-gradient(to right, #ec2239, #40a4e2, #ea96f5),
  $width: 230px
) {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: $linear;
  width: $width;
}

/*
    彩色图标变灰
*/
@mixin color-recover($color: #ddd) {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: $color;

  &:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
  }
}

/*
    放大镜效果
*/
@mixin magnifier($ratio: 2, $box-w: 600px, $box-h: 400px, $box-bg: '') {
  $outbox-w: $box-w * $ratio;
  $outbox-h: $box-h * $ratio;

  --x: 0;
  --y: 0;
  overflow: hidden;
  position: relative;
  width: $box-w;
  height: $box-h;
  background: url($box-bg) no-repeat center/100% 100%;
  cursor: pointer;

  &::before {
    --size: 0;
    $scale-x: calc(var(--size) / #{$ratio} - #{$ratio} * var(--x));
    $scale-y: calc(var(--size) / #{$ratio} - #{$ratio} * var(--y));
    position: absolute;
    left: var(--x);
    top: var(--y);
    border-radius: 100%;
    width: var(--size);
    height: var(--size);
    background: #333 url($box-bg) no-repeat $scale-x $scale-y/$outbox-w
      $outbox-h;
    box-shadow: 1px 1px 3px rgba(#000, 0.5);
    content: '';
    will-change: left, top;
    transform: translate(-50%, -50%);
  }

  &:hover::before {
    --size: 100px;
  }
}
